<template>
	<view class="technician-info order-pages rel" v-if="detail.id">
		<banner @change="goBanner" :list="detail.banner" :margin="0" :autoplay="true" :height="717"
			v-if="detail.banner.length > 0">
		</banner>
		<!-- <view class="ft-label flex-y-center f-paragraph">
			<view class="ft-time flex-center c-base pl-lg pr-lg pt-md pb-md rel" >
				<view class="ft-bg abs" :style="{background:primaryColor}"></view>
				<view @tap.stop="toJump('ftList')" v-for="(item) in ftList" class="ft">
					<i class="iconfont" :class="item.icon" :style="{color:primaryColor}"></i>
					<span class="c-title ml-sm">{{ item.text }}</span>
				</view>	
			</view>
		</view>		 -->
		<view class="pd-lg fill-base">
			<view class="flex-between">
				<view class="f-title c-black text-bold max-500">{{detail.coach_name || '-'}}</view>
				<view class="" style="width: 500rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;">
					<!-- <view class="list_bt_sm" @click="clickCollect">
									<image src="/static/zxc/start.png" mode="widthFix" style="width: 45rpx;"></image>
									<text v-if="detail.is_collect == 0" style="font-size: 36rpx;">收藏</text>
									<text v-if="detail.is_collect == 1" style="font-size: 36rpx;">取消收藏</text>
								</view> -->
					<view class="list_bt_sm" @click="clickCollect" style="width: 50%;">
						<image :src="detail.is_collect == 0?notC:isC" mode="" style="width: 55rpx;height: 55rpx;">
						</image>
						<text class="c-caption" style="font-size: 36rpx;">收藏</text>
					</view>
					<button class="flex-center" open-type="share" style="justify-content: flex-end;width: 50%;">
						<view class="iconfenxiang iconfont" style="font-size: 56rpx;" :style="{color:primaryColor}">
						</view>
						<text class="c-caption" style="padding-left: 6rpx;font-size: 36rpx;">分享</text>
					</button>
					<!-- <view @tap.stop="toShield" class="flex-y-center">
									<view class="like-label flex-center mr-sm radius"
										:style="{background:detail.is_shield?'#FF8D4C':''}">
										<i class="iconfont"
											:class="[{'iconbuxihuan c-caption':!detail.is_shield},{'iconbuxihuan-xuanzhong c-base':detail.is_shield}]" style="font-size: 40rpx;"></i>
									</view>
									<text style="font-size: 36rpx;">屏蔽</text>
								</view> -->
				</view>
			</view>
			<view class="" style="display: flex;align-items: center;justify-content: space-between;">
				<view class="flex-y-center mt-sm">
					<view class="service-label flex-center f-icontext">
						{{textType[detail.text_type]}}
					</view>
					<view class="time-label flex-y-center ml-md f-icontext c-base" v-if="detail.near_time"
						:style="{border:`1rpx solid ${primaryColor}`}">
						<view class="near-text flex-center" :style="{background:primaryColor}">最早可约</view>
						<view class="near-time flex-center c-base rel" :style="{color:primaryColor}">
							<view class="bg abs" :style="{background:primaryColor}"></view>
							今{{detail.near_time}}
						</view>
					</view>
				</view>
			</view>
			<view class="flex-y-center mt-lg f-icontext c-caption">
				<block v-if="(detail.store_id && detail.store_name) || (detail.admin_id && detail.admin_name)">
					<view @tap.stop="goStoreMerchant" class="flex-y-center">
						<i class="iconfont icondianpu"></i>
						<view class="ellipsis" style="max-width: 250rpx;">{{detail.store_name || detail.admin_name}}
						</view>
					</view>
					<view class="line"></view>
				</block>
				<view class="flex-y-baseline" @tap.stop="toComment">
					<i class="iconfont iconpingfen1 icon-font-color"></i>
					<view class="star-text flex-y-center f-caption">{{detail.star || 0}}</view>
				</view>
				<view class="line"></view>
				<view>已服务{{detail.order_num>9999?'9999+':detail.order_num}}单</view>
				<view class="line"></view>
				<view>从业{{detail.work_time}}年</view>
			</view>
			<view class="flex-y-center mt-lg f-icontext c-caption">
				商家地址:{{detail.address}}
			</view>
		</view>
		<view class="fill-base mt-md pt-lg pl-lg pr-md pb-lg">
			<view class="pb-lg f-paragraph c-black text-bold">{{`${$t('action.attendantName')}简介`}}</view>
			<scroll-view scroll-x class="picture-list">
				<view @tap.stop="toPreviewImage(index,'self_img')" class="picture-item"
					v-for="(item,index) in detail.self_img" :key="index">
					<!-- #ifdef H5 -->
					<view class="cover radius-16">
						<view class="h5-image cover radius-16" :style="{ backgroundImage : `url('${item}')`}">
						</view>
					</view>
					<!-- #endif -->
					<!-- #ifndef H5 -->
					<image mode="aspectFill" lazy-load class="cover radius-16" :src="item"></image>
					<!-- #endif -->
				</view>
			</scroll-view>
			<view class="introduce-info pt-md f-paragraph c-title radius-16">
				<!-- <span v-if="!detail.showText">{{detail.text.substring(0,100000)}}</span> -->
				<!-- <u-parse :content="detail.text" :tagStyle="style"></u-parse> -->
				<view>
					<!-- <text decode="emsp" style="word-break:break-all;">{{detail.text}}</text> -->
					<u-parse :content="detail.text" :tagStyle="style"></u-parse>
				</view>
				<span @tap.stop="toShowHide('showText')" :class="[{'ml-md':!detail.showText},{'mt-md':detail.showText}]"
					:style="{color:primaryColor}" v-if="detail.have_show_text">

				</span>
			</view>
		</view>
		<view class="fill-base mt-md pt-lg pl-lg pr-md pb-lg">
			<view class="pb-lg f-paragraph c-black text-bold">资质证书</view>
			<scroll-view scroll-x class="picture-list">
				<view @tap.stop="toPreviewImage(index,'license')" class="picture-item"
					v-for="(item,index) in detail.license" :key="index">
					<!-- #ifdef H5 -->
					<view class="cover radius-16">
						<view class="h5-image cover radius-16" :style="{ backgroundImage : `url('${item}')`}">
						</view>
					</view>
					<!-- #endif -->
					<!-- #ifndef H5 -->
					<image mode="aspectFill" lazy-load class="cover radius-16" :src="item"></image>
					<!-- #endif -->


				</view>
			</scroll-view>
		</view>
		<view class="fill-base mt-md pt-lg pb-lg">
			<view @tap.stop="$util.goUrl({url: `/shopstore/pages/service?id=${options.id}`})"
				class="flex-between pl-lg pr-md " :class="[{'pb-lg': serviceList.length>0}]">
				<view class="f-paragraph c-black text-bold">选择项目</view>
				<!-- <view @tap.stop="toComment" class="flex-y-center f-caption c-caption">查看评价<i
						class="iconfont icongengduo" style="font-size: 24rpx;"></i></view> -->
			</view>

			<view class="pl-lg pr-lg b-1px-b mt-md pb-md" v-for="(item,index) in serviceList" :key="index">
				<view class="service-list-item">
					<view @tap.stop="goDetail(item.id)" class="list-item" style="display: flex;">
						<!-- #ifdef H5 -->
						<view class="cover radius-16">
							<view class="h5-image cover radius-16" :style="{ backgroundImage : `url('${item.cover}')`}">
							</view>
						</view>
						<!-- #endif -->
						<!-- #ifndef H5 -->
						<image mode="aspectFill" lazy-load class="cover radius-16" :src="item.cover"></image>
						<!-- #endif -->
						<view class="flex-1 ml-md"
							style="display: flex;flex-direction: column;justify-content: space-between;padding: 8rpx 0;width: 50%;">
							<view class="flex-between">
								<view class="f-title c-title text-bold ellipsis" style="max-width: 210rpx;">
									{{ item.title }}</view>
								<view class="f-caption c-caption mt-sm mb-sm">超{{ item.total_sale }}人选择
								</view>
							</view>
							<view class="f-caption c-caption mt-sm mb-sm"
								style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;">
								{{ item.sub_title || '' }}
							</view>
							<view class="" style="display: flex;align-items: center;justify-content: space-between;">
								<view class="flex-between" style="flex-wrap: wrap;flex: 1;margin-right: 16rpx;">
									<view class="f-desc c-caption ellipsis" style="width: 100%;">
										<view class=""
											style="display: flex;align-items: center;justify-content: space-between;">
											<view class="flex-y-baseline f-icontext c-orange text-bold mr-sm">
												<b class="f-caption c-orange">￥</b>
												<view class="f-md-title">
													{{ item.price }}
												</view>
											</view>
											<view class="text-delete" v-if="item.init_price">￥{{ item.init_price }}
											</view>
										</view>
										<view class=""
											style="display: flex;align-items: center;justify-content: space-between;">
											<view class="servefc" v-if="item.is_diet == 0">
												<i class="iconfont icon-shijian" :style="{ color: primaryColor }"></i>
												<span class="f-caption c-title ml-sm">{{ item.time_long }}分钟</span>
											</view>
											<view class="f-caption c-caption" style="display: none;">
												超{{ item.total_sale }}人选择</view>
										</view>
									</view>
								</view>
								<auth @tap.stop.prevent :needAuth="userInfo && (!userInfo.phone || !userInfo.nickName)"
									:must="true" :type="!userInfo.phone ? 'phone' : 'userInfo'" @go="toOrder(index)">
									<view class="flex-between">
										<view class="item-btn flex-center f-caption c-base"
											:style="{height:'100rpx',background: `linear-gradient(68deg, ${primaryColor}, ${subColor})`}">
											{{ item.is_diet == 1 ? `选择房间` : `下单`}}
										</view>
									</view>
								</auth>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="space-footer"></view>
		<technician-list-popup ref="technician_list_popup" from="technician-info"></technician-list-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import technicianListPopup from "@/components/technician-list-popup.vue"
	export default {
		components: {
			technicianListPopup
		},
		data() {
			return {
				options: {},
				textType: {
					1: '可服务',
					2: '服务中',
					3: '可预约',
					4: '不可预约'
				},
				ftList: [{
					icon: 'icon-kzj',
					text: '实名认证'
				}, {
					icon: 'icon-kpk',
					text: '爽约包赔'
				}, {
					icon: 'icon-sybp',
					text: '超时秒退'
				}, {
					icon: 'icon-kzz',
					text: '资质证书'
				}],
				detail: {},
				serviceList: [],
				loading: true,
				isC: '../../static/images/c1.png',
				notC: '../../static/images/c2.png',
				lockTap: false,
				style:{
					img:'width: 100%;',
				}
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo,
		}),
		onShareAppMessage() {
			let {
				id: pid = 0
			} = this.userInfo
			let {
				id,
				coach_name: title,
				work_img: imageUrl
			} = this.detail
			let path = `/user/pages/technician-info?id=${id}&pid=${pid}`
			return {
				title,
				imageUrl,
				path
			}
		},
		onLoad(options) {
			this.options = options
			this.initIndex()
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		methods: {
			...mapActions(['getConfigInfo', 'getUserInfo']),
			...mapMutations(['updateTechnicianItem', 'updateUserItem']),
			async initIndex() {
				// #ifdef H5
				if (this.$jweixin.isWechat()) {
					await this.$jweixin.initJssdk();
					this.$jweixin.wxReady(() => {
						this.$jweixin.hideOptionMenu()
					})
				}
				// #endif
				await this.getDetail()
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				uni.setNavigationBarTitle({
					title: this.$t('action.attendantName') + '详情'
				})
				await this.getList()
			},
			initRefresh() {
				this.initIndex(true)
			},
			async getDetail() {
				let {
					id
				} = this.options
				let data = await this.$api.service.coachInfo({
					id
				});
				data.banner = data.video ? [{
					jump_type: 'video',
					img: data.work_img,
					jump_url: data.video
				}] : [{
					img: data.work_img
				}]
				let have_show_text = data.text.length > 42
				data.have_show_text = have_show_text
				data.showText = !have_show_text
				this.detail = data
			},
			goDetail(ids) {
				let {
					store_id: store_id = 0,
					is_work: is_work = 0
				} = this.detail
				let cid = this.options.id
				let url = `/user/pages/detail?id=${ids}&store_id=${store_id}&cid=${cid}&is_work=${is_work}`
				this.$util.goUrl({
					url
				})
			},
			// async toOrder(ids) {
			// 	let {
			// 		id: coach_id,
			// 	} = this.options
			// 	let {
			// 		is_work = 0
			// 	} = this.detail
			// 	if (!is_work) return
			// 	let service_id = ids
			// 	if (this.lockTap) return;
			// 	this.lockTap = true;
			// 	try {
			// 		await this.$api.order.addCar({
			// 			service_id,
			// 			coach_id,
			// 			num: 1,
			// 			is_top: 1,
			// 			coach_service: 1
			// 		})
			// 		this.lockTap = false
			// 		let url = `/user/pages/order?id=${coach_id}&ser_id=${service_id}`
			// 		this.$util.goUrl({
			// 			url
			// 		})
			// 	} catch (e) {
			// 		this.lockTap = false
			// 	}

			// },
			async getList() {
				let {
					id: coach_id
				} = this.options
				let {
					data
				} = await this.$api.service.coachServiceList({
					coach_id
				});
				this.serviceList = data
				this.loading = false
				this.$util.hideAll()
			},
			async toShield() {
				let {
					id
				} = this.options
				await this.$api.mine.shieldCoachAdd({
					type: 2,
					coach_id: id
				})
				this.updateUserItem({
					key: 'haveShieldOper',
					val: 2
				})
				this.$util.back()
				setTimeout(() => {
					this.$util.goUrl({
						url: 1,
						openType: `navigateBack`
					})
				}, 1000)
			},
			// 预约
			async toOrder(index) {
				let {
					is_work = 0
				} = this.detail
				if (!is_work) {
					this.$util.showToast({
						title: `该${this.$t('action.attendantName')}未上班`
					})
					return
				}
				let {
					id: service_id,
				} = this.serviceList[index]
				let {
					id: coach_id
				} = this.options
				if (this.lockTap) return;
				this.lockTap = true;
				try {
					await this.$api.order.addCar({
						service_id,
						coach_id,
						num: 1,
						is_top: 1,
						coach_service: 1
					})
					this.lockTap = false
					let url = `/user/pages/order?id=${coach_id}&ser_id=${service_id}`
					this.$util.goUrl({
						url
					})
				} catch (e) {
					this.lockTap = false
				}
			},
			toShowHide(key) {
				this.detail[key] = !this.detail[key]
			},
			toComment() {
				this.$refs.technician_list_popup.toShowPopup(this.detail, 'message')
			},
			toPreviewImage(index, key = 0) {
				let urls = this.detail[key]
				if (key == 'work_img') {
					urls = [urls]
				}
				this.$util.previewImage({
					current: urls[index],
					urls
				})
			},
			goStoreMerchant() {
				let {
					store_id,
					admin_id
				} = this.detail
				let url = store_id ? `/shopstore/pages/detail?id=${store_id}` : `/user/pages/merchant-info?id=${admin_id}`
				this.$util.goUrl({
					url
				})
			},
			async clickCollect() {
				var info = await this.$api.zxcadd.articleCollect({
					article_id: this.options.id,
					type: 1
				});
				this.$util.showToast({
					title: info,
				})
				if (this.detail.is_collect == 1) {
					this.detail.is_collect = 0
					return
				}
				if (this.detail.is_collect == 0) {
					this.detail.is_collect = 1
					return
				}
			}
		}
	}
</script>


<style lang="scss">
	.technician-info {
		.cover-img {
			width: 750rpx;
			height: 417rpx;
		}


		.like-label {
			width: 42rpx;
			height: 42rpx;
			background: #EFEFEF;

			.iconfont {
				font-size: 24rpx;
				margin-top: 5rpx;
			}
		}

		.service-label {
			min-width: 88rpx;
			height: 32rpx;
			padding: 0 10rpx;
			color: #EBDDB1;
			background: linear-gradient(270deg, #4C545A 0%, #282B34 100%);
			border-radius: 4rpx;
		}

		.time-label {

			.near-text {
				width: 110rpx;
				height: 38rpx;
				background: #F5F5F5;
				border-radius: 3rpx 0 0 3rpx;
			}

			.near-time {
				width: 110rpx;
				height: 38rpx;
				border-radius: 0 3rpx 3rpx 0;

				.bg {
					opacity: 0.1;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					z-index: 1;
					border-radius: 0 3rpx 3rpx 0;
				}
			}
		}

		.ft-label {
			.near-text {
				width: 100%;
				height: 33rpx;
				background: #F5F5F5;
			}

			.ft-time {
				width: 100%;
				height: 76rpx;

				.ft-bg {
					opacity: 0.1;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					z-index: 1;
					border-radius: 10rpx;
				}
			}

			.ft {
				display: flex;
				align-items: center;
				width: 100%;
			}

			.tp-img {
				width: 183px;
				height: 16px;
			}
		}

		.icondianpu {
			margin-right: 6rpx;
		}

		.iconpingfen1 {
			font-size: 24rpx;
			background-image: -webkit-linear-gradient(270deg, #FAD961 0%, #F76B1C 100%);
		}

		.star-text {
			height: 26rpx;
			color: #FF9519;
			margin-left: 6rpx;
		}

		.line {
			width: 1rpx;
			height: 11rpx;
			background: #979797;
			margin: 0 18rpx;
		}

		.introduce-info {
			width: 690rpx;
		}

		.picture-list {
			white-space: nowrap;
			width: 690rpx;

			.picture-item {
				width: 122rpx;
				margin-left: 20rpx;
				display: inline-block;

				.cover {
					width: 122rpx;
					height: 122rpx;
				}
			}

			.picture-item:nth-child(1) {
				margin-left: 0;
			}
		}

		.comment-item {
			.avatar {
				width: 52rpx;
				height: 52rpx;
				background: #f4f6f8;
			}

			.iconpingfen1 {
				font-size: 28rpx;
				margin-right: 5rpx;
				font-size: 28rpx;
			}
		}

		.top_rz {
			width: 100%;
			height: 30px;
		}

		.image_loading {
			width: 100%;
			height: 100%;
		}

	}

	.list_bt_sm {
		// width: 33%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 28rpx;
		color: #000;
	}

	.list_bt_sm image {
		width: 30rpx;
		margin-right: 10rpx;
	}

	.service-list-item {
		.list-item {
			.cover {
				width: 300rpx;
				height: 300rpx;
			}

			.time-long {
				min-width: 72rpx;
				height: 30rpx;
				padding: 0 5rpx;
				background: linear-gradient(270deg, #4C545A 0%, #282B34 100%);
				border-radius: 4rpx;
				font-size: 20rpx;
				color: #FFEEB9;
				margin-right: 16rpx;
			}

			.f-icontext {
				font-size: 18rpx;
			}

			.text-delete {
				font-size: 24rpx;
				color: #B9B9B9;
			}

			.item-btn {
				min-width: 165rpx;
				height: 80rpx;
				padding: 0 10rpx;
				border-radius: 20rpx;
			}
		}
	}
</style>